import React ,{useEffect, useState } from 'react'
import '../assets/css/repair.css'
import { Card,Input,Button,Pagination,Select,Form,Table,message,Modal } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {staffList,staffDel,staffDelAll,typeList} from  '../apis/staffs'
import { useNavigate } from 'react-router-dom'
interface Params {
  key: string;
  page: number;
  psize: number;
  type:string
}
var total = 0
const Staffs: React.FC = () => {
  const navigate = useNavigate();
  // 表格
  const columns: ColumnsType<any> = [
      {
        title: 'id',
        dataIndex: 'id',
        align:'center',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        align:'center',
      },
      {
        title: '性别',
        dataIndex: 'address',
        align:'center',
        render:(_,record)=>(
          <div>
            {record.sex===0?'女':'男'}
          </div>
        )
      },
      {
        title: '身份证号',
        dataIndex: 'cardid',
        align:'center',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        align:'center',
      },
      {
        title: '管理小区',
        dataIndex: 'typename',
        align:'center',
      },
      {
        title: '操作',
        dataIndex: 'id',
        align:'center',
        render: (row)=>(
          <div>
            <Button style={{background:'#67c23a',color:'#ffffff',marginRight:'5px'}}>修改</Button>
            <Button onClick={()=>del(row)} style={{background:'#f56c6c',color:'#ffffff',marginRight:'5px'}}>删除</Button>
          </div>
        ),
      },
  ];
  // 复选框
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 列表
  const [list,setList]=useState<any>([]);
  const [params,setParams] = useState<Params>({
    page:1,
    psize:20,
    type:'',
    key:'',
  })
  useEffect(()=>{
    getList()
    gettypeList()
  },[params])
  const getList=async()=>{
    const res:any = await staffList(params)
    console.log(res);
    if(res.errCode === 10000){
      setList(res.data.list);
      total = res.data.counts
    }
  }
  // 分页
  const ange = (a: any, b: any) => {
    console.log(a, b);
    setParams({ ...params, page: a, psize: b })
  }
  // 下拉选择
  const [state,setState] = useState<any>([])
  const gettypeList = async()=>{
    const res:any = await typeList({})
    console.log(res);
    setState(res.data.list)
  }
  const handleChange = (value: any,evt:any) => {
    console.log(value,evt);
    setParams({ ...params,type:evt.name});
  };
  // 查询
  const onSearchFinish = (values: any) => {
    console.log(values);
    setParams({ ...params, ...values });
    console.log(params);
  };
  // 单删
  const del = (id:any)=>{
    console.log(id);
    Modal.confirm({
      title:'是否删除此条数据？',
      content:'请谨慎操作',
      okText:'确认',
      cancelText:'取消',
      async onOk(){
        const res: any = await staffDel({ id: id });
        console.log(res);
        if (res.errCode === 10000) {
          getList();
          message.success('删除成功');
        }
      },
      onCancel(){
        message.error('删除失败');
      }
    })
  }
  // 批量删除
  const delAll = () => {
    console.log(selectedRowKeys);
    Modal.confirm({
      title:'是否删除此条数据？',
      content:'请谨慎操作',
      okText:'确认',
      cancelText:'取消',
      onOk:async()=>{
        const res: any = await staffDelAll({ ids: selectedRowKeys });
        console.log(res);
        if (res.errCode === 10000) {
          getList();
          message.success('删除成功');
        }
      },
      onCancel(){
        message.error('删除失败');
      }
    })
  }
  // 添加
  const add = ()=>{
    navigate(`/Staffsadd`)

  }
  return (
    <div id="repairs">
      <div>
        <Card className="card" title={<a href="#">职员管理</a>}>
          {/* 查询 */}
          <div className="search">
            <Form layout="inline" onFinish={onSearchFinish}>
              <Form.Item label="姓名" name="key">
                <Input style={{ width: 140 }} placeholder="职员名" />
              </Form.Item>
              <Form.Item label="职员类型" name='type'>
                <Select
                  placeholder="请选择"
                  style={{ width: 120 }}
                  onChange={handleChange}
                  fieldNames={{label:'name',value:'id'}}
                  options={state}
                />
              </Form.Item>
              <Form.Item>
                <Button htmlType="submit" type="primary">
                  查询
                </Button>
              </Form.Item>
            </Form>
          </div>
          {/* 删除 */}
          <div style={{marginTop:'20px'}}>
            <Button type="primary" style={{marginRight:'15px'}} onClick={add}>添加</Button>
            <Button onClick={delAll} style={{background:'#f56c6c',color:'#ffffff',marginBottom:'20px'}}>
              批量删除
            </Button>
          </div>
          {/* 表格 */}
          <div className="tab">
            <Table rowKey="id" bordered rowSelection={rowSelection} columns={columns} dataSource={list} pagination={false} />
          </div>
          <div className="page" style={{textAlign:'center',marginTop:'30px'}}>
            <Pagination
              total={total}
              onChange={ange}
              showSizeChanger
              showQuickJumper
              showTotal={total => `共 ${total} 条数据`}
            />
          </div>
        </Card>
      </div>
    </div>
  );
}
export default Staffs;
